<template>
  <div class="content">
    <div class="cmc-content">
      <h1>System Status</h1>
      <div>Supporting {{tableData.length}} assets</div>
      <p>The System Status page is a monitoring tool
        designed by our team that provides near
        real-time information (updates approximately every 5 minutes)
        about availability and performance,
        as well as incoming and outgoing transaction status.
        This is an evolving tool that will include more
        information on the system performance, aiming at
        making our system processes as transparent as possible.</p>
      <p>Our deposit wallets funds are only temporary
        storage until the deposit has been processed.
        Our system regularly batches the inputs from deposit
        transactions into a single transaction sent
        to the withdrawal wallet.</p>
    </div>
    <div class="tablelist">
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        :max-height="maxheight"
        v-loading="loadingTable"
        style="width: 100%;">
        <el-table-column
          fixed
          label="Coin"
          prop="number">
          <template slot-scope="scope">
            {{scope.row.currency}}
          </template>
        </el-table-column>
        <el-table-column
          label="Asset Type"
          prop="number">
          <template slot-scope="scope">
            Token
          </template>
        </el-table-column>
        <el-table-column
          label="Deposits"
          prop="number">
          <template slot-scope="scope">
            {{scope.row.status === 0 ? 'Active' : 'Offline'}}
          </template>
        </el-table-column>
        <!-- 提款 -->
        <el-table-column
          label="Withdrawals"
          prop="number">
          <template slot-scope="scope">
            {{scope.row.status === 0 ? 'Active' : 'Offline'}}
          </template>
        </el-table-column>
        <el-table-column
          label="Trading"
          prop="number">
          <template slot-scope="scope">
            {{scope.row.status === 0 ? 'Active' : 'Offline'}}
          </template>
        </el-table-column>
        <!-- 待决存款 -->
        <el-table-column
          label="Pending Deposits"
          prop="number">
          <template slot-scope="scope">
            0
          </template>
        </el-table-column>
        <!-- 待提款 -->
        <el-table-column
          label="Pending Withdrawals"
          prop="number">
          <template slot-scope="scope">
            0
          </template>
        </el-table-column>
        <!-- 平均2周 存放时间 -->
        <el-table-column
          label="2 Week Average Deposit Time"
          prop="number">
          <template slot-scope="scope">
            0
          </template>
        </el-table-column>
        <!-- 2周平均取款时间 -->
        <el-table-column
          label="2 Week Average Withdrawal Time"
          prop="number">
          <template slot-scope="scope">
            0
          </template>
        </el-table-column>
        <!-- 维修注意事项 -->
        <el-table-column
          label="Maintenance Notes"
          prop="number">
          <template slot-scope="scope">
            -
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Cmc', // 系统币状态
  components: {
  },
  data() {
    return {
      tableData: [],
      loadingTable: true,
      timer: null,
      maxheight: window.innerHeight - 251 - 50 - 80 - 111
    };
  },
  props: {
  },
  watch: {
  },
  created() {
    const themeLink = document.querySelector('link[name="theme"]');
    const path = '/static/theme/theme-1B1D27/index.css';
    document.getElementsByTagName('body')[0].className = 'theme-1B1D27';
    themeLink.setAttribute('href', path);
    this.$store.dispatch('setLanguage', 'en');
  },
  mounted() {
    this.handleGetApi();
    this.timer = setInterval(() => {
      this.handleGetApi();
    }, 300000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
    this.handleThemeAction();
  },
  methods: {
    handleGetApi() {
      const hostName = location.hostname;
      let url = 'https://api.newdex.io/v1/common/symbols';
      // let url = 'http://192.168.8.18:7003/v1/common/symbols';
      if (hostName.indexOf('.vip') >= 0) {
        url = 'https://api.newdex.vip/v1/common/symbols';
      }
      axios({
        method: 'get',
        url,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      }).then((res) => {
        if (res.data.code === 200) {
          const data = res.data.data || [];
          data.sort((a, b) => {
            const sortData = b.currency < a.currency ? 1 : -1;
            return sortData;
          })
          this.tableData = data;
          this.loadingTable = false;
        }
      })
    },
    handleThemeAction() {
      const themeLink = document.querySelector('link[name="theme"]');
      const target = {
        name: localStorage.getItem('theme') || 'theme-278EDA'
      };
      let path;
      if (target) {
        path = `/static/theme/${target.name}/index.css`;
        document.getElementsByTagName('body')[0].className = target.name;
        themeLink.setAttribute('href', path);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
  .content {
    margin: 0 auto;
    padding: 10px 20px 30px;

    /deep/ .el-table__fixed::before {
      background-color: transparent
    }

    /deep/ .el-table {
      color: #7b8db9
    }

    /deep/ .el-table__body-wrapper {
      &::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 15px;
      }
      /*定义滚动条的轨道，内阴影及圆角*/
      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
        border-radius: 0;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 15px;
      }
      /*定义滑块，内阴影及圆角*/
      &::-webkit-scrollbar-thumb {
        /*width: 10px;*/
        /*height: 25px;*/
        -webkit-box-shadow: inset 0 0 0 rgba(255, 255, 255, .1);
        background-color: rgba(255, 255, 255, .1);
        border-radius: 15px;
      }
    }
  }
  .cmc-content {
    padding: 20px 0;

    h1 {
      padding: 0 0 20px
    }

    div {
      padding: 0 0 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(256, 256, 256, 0.1)
    }

    p {
      font-size: 14px;
      line-height: 1.42857143;
      padding: 5px 0;
      margin-bottom: 10px;
    }
  }
</style>
